<style lang="scss" scoped>

    $width:330px;

    $height:150px;

    $color:#5b5b5b;

    $active_bg:#4eff47;

    $not_active:#dbdbdb;

    .wrapper{
      width: $width;
      height: $height;
      display: block;
      background: white;
      float: left;
      margin: 30px 40px 40px 40px;
    }

    .font{
      font-family: '微软雅黑';
      color: $color;
    }


    .title{

      @extend  .font;

      width:100%;
      height: 50px;
      font-size: 26px;
      padding: 15px 0 0 20px;
      display: inline-block;
      border-radius: 5px;
    }

    .progress{
      width:300px;
      height: 30px;
      display: block;
      margin:15px;
      position: relative;
      background: $not_active;
      border-radius: 5px;
      overflow:hidden;
    }

    .progress-active{
      position: absolute;
      left:0;
      top:0;
      background:$active_bg ;
      width:230px;
      height: 30px;
      display: block;
    }

    .progressed,
    .progress-time{

      @extend  .font;
      width:120px;
      height: 25px;
      line-height: 25px;
      float: left;
      margin: 0 15px;
    }







</style>

<template>
    <div class="wrapper">
        <span class="title">项目进度</span>
        <div class="progress">
          <span class="progress-active"></span>
        </div>
        <div class="progressed">
          <span class="ptitle">完成度:</span>
          <span class="pvalue">65%</span>
        </div>
        <div class="progress-time">
          <span class="ptitle">进度时间:</span>
          <span class="pvalue">123天</span>
        </div>
        <span class=""></span>
    </div>
</template>

<script>
  export  default {
      name:"ProjectProgress"
  }
</script>
